import React, { Component,PureComponent } from 'react'

export default class TabC extends Component {
  state = {
    carNumbers:[]
  }
  componentDidMount(){
    this.getCarNumber()
  }
  getCarNumber = ()=>{
    this.timmer = setInterval(() => {
      let temp = []
      for (let index = 0; index < 6; index++) {
        const carNumber = this.begin()
        temp.push(carNumber)
      }
      this.setState({
        carNumbers:temp
      })
    }, 300);
  }
  /**
   * 产生车牌的函数
   */
  begin = ()=>{
    //随机产生的字母数字
    let array = []
    //产生三个数字
    for (let index = 0; index < 3; index++) {
      const num = Math.floor(Math.random()*10)
      array.push(num)
    }
    //产生两个字母
    for (let index = 0; index < 2; index++) {
      //65 - 90
      const num = Math.floor(Math.random()*26+65)
      const chart = String.fromCharCode(num)
      array.push(chart)
    }
    //产生车牌（数组转化字符串）
    //a后一个值，b代表前一个
    //const temp = [2,5,3,8]
    array.sort((a,b)=>{
      return 0.5-Math.random()
    })
    return "川A"+array.join("")
  }
  pause = ()=>{
    console.log(this.timmer);
    clearInterval(this.timmer)
  }
  chooseNumber = (e)=>{
    const value = e.target.innerText
    console.log(value);
  }
  render() {
    const {carNumbers} = this.state
    return (
      <div>
        <h2>选号</h2>
        <ul onClick={this.chooseNumber}>
          {carNumbers.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>
        <p>你选中车牌:</p>
        <button onClick={this.pause}>暂停</button>
      </div>
    )
  }
}
